import { defineStore } from "pinia";
import { useCssVar } from "@vueuse/core";
import { handleResize } from "@/utils/other";

export interface Breadcrumd {
    path: string
    name: string
}
interface Setting {
    theme: string // 主题
    layout: 'A' | 'B' | 'C' | 'D' // 布局
    dark: 'light' | 'dark' // 暗黑模式
    gray: boolean // 灰色模式
    drawer: boolean // 设置抽屉显隐
    isCollapse: boolean // 折叠菜单
    isBreadcrumd: boolean // 是否显示面包屑
    breadcrumdlist: Breadcrumd[] // 面包屑数据
}
// 判断浏览器是否为深色模式
let isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
export const useSetting = defineStore({
    id: "useSetting",
    // 定义数据状态
    state: (): Setting => {
        return {
            theme: "#0B717D",// 主题
            layout: 'B', // 布局
            dark: isDarkMode ? "dark" : "light", // 是否开启暗黑模式
            gray: false, // 是否开启灰色模式
            drawer: false, // 是否打开设置抽屉
            isCollapse: false, // 是否折叠菜单
            isBreadcrumd: false, // 是否显示导航标签页
            breadcrumdlist: [], // 标签页列表
        }
    },
    // 开启持久化
    persist: {
        enabled: true,
        strategies: [
            {
                key: 'useSetting',  //自定义 Key值
                storage: sessionStorage,  // 选择存储方式
            },
        ],
    },
    // 数据监视，计算数据变化[有缓存]
    getters: {

    },
    // 同步或异步操作
    actions: {
        // 设置暗黑模式
        setDark() {
            let html = document.getElementsByTagName("html")[0]
            html.className = this.dark
            this.toogleDark()
        },
        toogleDark() {
            const el = document.documentElement
            const color = useCssVar('--active-color', el)
            const textColor = useCssVar('--color', el)
            const containerBg = useCssVar('--containerBackground', el)
            const background = useCssVar('--background', el)
            const borderColor = useCssVar('--borderColor', el)
            const shadowColor = useCssVar('--shadowColor', el)
            if (this.dark === "dark") {
                color.value = this.theme
                textColor.value = "#fff"
                containerBg.value = "#222"
                background.value = "#141414"
                borderColor.value = "rgba(255,255,255,0.15)"
                shadowColor.value = "#000"
            } else {
                color.value = this.theme
                textColor.value = "#333"
                containerBg.value = "#f8f8f8"
                background.value = "#fff"
                borderColor.value = "rgba(0,0,0,0.15)"
                shadowColor.value = "#e5e5e5"
            }
        },
        setGray(val: boolean) {
            this.gray = val
            if (this.gray) {
                document.body.style.filter = "grayscale(100%)"
                return
            }
            document.body.style.filter = "grayscale(0%)"
        },
        // 设置折叠
        setCollapse(collapse: boolean) {

            const el = document.documentElement
            const width = useCssVar('--aside-width', el)
            collapse ? width.value = "65px" : width.value = "250px"
            if (collapse) {
                this.isCollapse = collapse
            } else {
                this.isCollapse = collapse
            }
            setTimeout(() => {

                handleResize()
            }, 500);
        },
        // 设置主题
        setTheme(c: string) {
            const el = document.documentElement
            const color = useCssVar('--active-color', el)
            color.value = c
            this.theme = c
            this.toogleDark()
        },
        // 删除面包屑导航
        removeBreadcrumd(breadcrumdItem: Breadcrumd) {
            if (this.breadcrumdlist?.length === 1) return

            const list = this.breadcrumdlist?.map((item: Breadcrumd) => {
                if (breadcrumdItem.path === item.path) {
                    return
                }
                return item
            }).filter(Boolean)

            list ? this.breadcrumdlist = list as Breadcrumd[] : [{ path: "/home", name: "首页" }]
        }
    }
})
